<template>
  <div :style="loginBackGround">
    <div :style="loginBbox">
      <div :style="navbarHeader">
       <div>
          <span :style="FirstHalf">{{titleOneMsg}}</span>
          <span :style="secondHalf">{{titleTowMsg}}</span>
        </div>
      </div>
      <div :style="formitemtop">
        <span :style="icon">
          <img :style="usericon"/>
        </span>
        <input :style="input" v-model="userLoginName" type="text" maxlength="30" :placeholder="loginNamePlaceholderMsg">
      </div>
      <div :style="formitemmiddle">
        <span :style="icon">
          <img :style="passicon"/>
        </span>
        <input :style="input" v-model="userLoginPwd" type="password"  maxlength="8" :placeholder="loginPassPlaceholderMsg"/>
      </div>
      <div id="codeImgId" :style="formitemmiddle">
        <span :style="checkcodespan">
         {{checkcodeMsg}}
        </span>
        <img  :style="checkcodeimg" :src="imgUrl" v-on:click="changeCheckCode()">
        <input :style="checkcodeinput" v-model="code" type="text" maxlength="6" :placeholder="checkcodePlaceholderMsg"/>
      </div>

      <button :style="btn" type="button" v-on:click="subLogin()">&nbsp;&nbsp;{{subLoginMsg01}}&nbsp;&nbsp;&nbsp;&nbsp;{{subLoginMsg02}}&nbsp;&nbsp;</button>
      <div :style="message">
        {{loginMessage}}
      </div>
      <div :style="logobox">
        <img :style="img"/>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
export default {
  name: 'login',
  mounted () {
    this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-login/login/initlogin').then((response) => {
      this.imgUUID = response.data
      this.changeCheckCode()
    })
  },
  methods: {
    changeCheckCode: function () {
      this.imgUrl = process.env.VUE_APP_BASE_API + '/monitor-login/login/createcode?imgUUID=' + this.imgUUID + '&time=' + Math.random()
    },
    subLogin: function () {
      let postData = {
        userLoginName: this.userLoginName.trim(),
        userLoginPwd: this.userLoginPwd.trim(),
        code: this.code,
        imgUUID: this.imgUUID
      }
      this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-login/login/checklogin', {
        params: {
          ...postData
        }
      }).then((response) => {
        if (response.data.message !== 'success') {
          this.loginMessage = response.data.message
        } else {
          this.loginMessage = ''
          this.sessionId = response.data.sessionId
          this.permission = response.data.permission
          this.$router.push({path: '/home', query: {username: this.sessionId, sign: this.permission}})
        }
      })
    }
  },
  data () {
    return {
      permission: '',
      sessionId: '',
      imgUUID: '',
      subLoginMsg01: '登',
      subLoginMsg02: '录',
      checkcodePlaceholderMsg: '请输入验证码',
      loginPassPlaceholderMsg: '请输入密码',
      loginNamePlaceholderMsg: '请输入用户名',
      titleOneMsg: '智慧工厂',
      titleTowMsg: '环境监测报警系统',
      checkcodeMsg: '校验码：',
      loginMessage: '',
      userLoginName: '',
      userLoginPwd: '',
      code: '',
      imgUrl: '',
      loginBackGround: {
        backgroundImage: 'url(' + require('@/assets/img/1.jpg') + ')',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        width: '100%',
        height: '100%'
      },
      loginBbox: {
        margin: '0 auto',
        width: '530px',
        height: '476px',
        backgroundImage: 'url(' + require('@/assets/img/2.png') + ')',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        position: 'absolute',
        left: '50%',
        top: '50%',
        marginTop: '-238px',
        marginLeft: '-265px',
        verticalAlign: 'middle'
      },
      navbarHeader: {
        margin: '0 auto',
        float: 'none',
        textAlign: 'center',
        width: '100%',
        height: '56px',
        fontSize: '24px',
        paddingTop: '80px'
      },
      FirstHalf: {
        color: '#3BC5BB'
      },
      secondHalf: {
        color: '#FF9A4C'
      },
      formitemtop: {
        marginLeft: '100px',
        marginRight: '30px',
        height: '34px',
        marginBottom: '20px',
        verticalAlign: 'middle'
      },
      icon: {
        float: 'left',
        display: 'block',
        width: '25px',
        height: '32px',
        color: 'rgb(204,204,204)',
        fontSize: '22px',
        marginTop: '2px'
      },
      usericon: {
        height: '22px',
        content: 'url(' + require('@/assets/img/3.png') + ')'
      },
      input: {
        textIndent: '10px',
        border: 'none',
        marginLeft: '10px',
        borderRadius: '5px',
        float: 'left',
        height: '32px',
        width: '268px',
        color: '#3a3f51',
        fontSize: '14px',
        outline: 'none',
        backgroundColor: 'rgba(255,255,255,0.5)'
      },
      formitemmiddle: {
        marginLeft: '100px',
        marginRight: '30px',
        height: '34px',
        marginBottom: '10px',
        verticalAlign: 'middle'
      },
      passicon: {
        height: '22px',
        content: 'url(' + require('@/assets/img/4.png') + ')'
      },
      checkcodespan: {
        height: '32px',
        float: 'left',
        paddingLeft: '35px',
        color: 'rgb(174,174,174)',
        fontSize: '14px',
        fontWeight: 'normal',
        lineHeight: '32px'
      },
      checkcodeimg: {
        float: 'left',
        width: '100px',
        height: '32px',
        borderRadius: '5px',
        cursor: 'pointer'
      },
      checkcodeinput: {
        textIndent: '10px',
        border: 'none',
        marginLeft: '10px',
        borderRadius: '5px',
        float: 'left',
        height: '30px',
        width: '100px',
        color: '#3a3f51',
        fontSize: '14px',
        outline: 'none',
        backgroundColor: 'rgba(255,255,255,0.5)'
      },
      btn: {
        display: 'block',
        margin: '0 auto',
        width: '60%',
        height: '30px',
        background: '#42BECC',
        borderRadius: '5px',
        fontSize: '14px',
        color: '#fff',
        cursor: 'pointer',
        border: 'none',
        backgroundColor: 'rgba(38,222,197,0.5)'
      },
      message: {
        textAlign: 'center',
        color: 'red',
        paddingTop: '5px',
        height: '21px'
      },
      logobox: {
        textAlign: 'center',
        paddingTop: '15px',
        height: '36px'
      },
      img: {
        height: '36px',
        width: '321px',
        content: 'url(' + require('@/assets/img/5.png') + ')'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  button:focus,input::-moz-focus-inner, button::-moz-focus-inner{
    outline: 0 !important;
  }
  button:hover{
    background-color:#87CDF1 !important;
  }
  button:active{
    background-color:#006699 !important;
  }
</style>
